import React, {useEffect, useState} from "react";
import { Button, Row, Col, DatePicker, Form, Input, Cascader, Select,TreeSelect } from 'antd'
import {addRootNode} from "../../../utils/tree";
import {useRef} from "react";
import { Trans,t } from "@lingui/macro"

/**
 * 自适应宽度TreeSelect
 *
 * @param props
 * @returns {Element}
 */
export default (props) => {
  const { trees } = props;
  const [maxOptionWidth, setMaxOptionWidth] = useState(400);

  const handleDropdownVisibleChange = visible => {
    if (visible) {
      // 计算TreeSelect选项的最大宽度
      const treeOptions = document.querySelectorAll('.ant-select-item-option-content');
      let maxWidth = 0;
      treeOptions.forEach(option => {
        console.log("---------------", option.offsetWidth)
        maxWidth = Math.max(maxWidth, option.offsetWidth);
      });
      setMaxOptionWidth(maxWidth);
    }
  };

  return (
    <Form.Item
      name='categoryId'
      label={t`Category`}
      // style={{ width: maxOptionWidth + 20 }} // 加上一些额外的空间
    >
      <TreeSelect
        showSearch
        style={{ width: '100%' }}
        dropdownStyle={{ maxHeight: 600, overflow: 'auto' }}
        placeholder="Please select"
        allowClear
        treeDefaultExpandAll
        disabled={false}
        treeData={addRootNode(trees?.categoryId)}
        // onDropdownVisibleChange={handleDropdownVisibleChange}
        popupMatchSelectWidth={false}
      />
    </Form.Item>
  );
};
